import React from "react";
import "./Header.css";
import { Link, NavLink, useHistory } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";

const Header = () => {
    const history = useHistory();
    const dispatch = useDispatch();
    const { login } = useSelector((state) => state);
    const exit = () => {
        dispatch({ type: "loginSuccess", login: false });
        localStorage.removeItem("login");
        history.replace("/login");
    };
    return (
        <div className="header-wrap">
            <div className="header">
                <img
                    className="logo"
                    src="https://static2.cnodejs.org/public/images/cnodejs_light.svg"
                    alt="123"
                />
                <div className="nav">
                    <NavLink exact activeStyle={{ color: "red" }} to="/">
                        首页
                    </NavLink>
                    <NavLink activeStyle={{ color: "red" }} to="/new">
                        新手入门
                    </NavLink>
                    <NavLink activeStyle={{ color: "red" }} to="/api">
                        API
                    </NavLink>

                    <NavLink activeStyle={{ color: "red" }} to="/user">
                        个人中心
                    </NavLink>
                    <NavLink activeStyle={{ color: "red" }} to="/collect">
                        收藏
                    </NavLink>
                    {login ? (
                        <>
                            <a href="#">设置</a>
                            <a href="#" onClick={exit}>
                                退出
                            </a>
                        </>
                    ) : (
                        <NavLink activeStyle={{ color: "red" }} to="/login">
                            登录
                        </NavLink>
                    )}
                </div>
            </div>
        </div>
    );
};

export default Header;

{
    /* <NavLink
    activeStyle={{ color: "red" }}
    to={{ pathname: "/lisi", state: { id: 100 } }}
>
    url
</NavLink> */
}
{
    /* <Link to="/">首页</Link>
<Link to="/new">新手入门</Link>
<Link to="/api">API</Link>
<Link to="/login">登录</Link>
<Link to="/zhangsan">用户</Link>
<Link to={{ pathname: "/lisi", state: { id: 100 } }}>url</Link> */
}
